<template>
  <div class="personal-info-container">
    <!-- 个人信息卡片 -->
    <div class="info-card">
      <!-- 卡片主体 - 详细信息 -->
      <div class="card-body">
        <!-- 个人简介 -->
        <div class="profile-section">
          <h2 class="section-title">
            <i class="fas fa-user-circle"></i> 个人资料
          </h2>
          <p class="profile-content">
            {{userInfo.biography}}
          </p>
        </div>

        <!-- 详细信息网格 -->
        <div class="details-grid">
          <div class="detail-item">
            <span class="detail-label">学号</span>
            <span class="detail-value">{{userInfo.studentId}}</span>
          </div>

          <div class="detail-item">
            <span class="detail-label">学院</span>
            <span class="detail-value">{{userInfo.college}}</span>
          </div>

          <div class="detail-item">
            <span class="detail-label">专业</span>
            <span class="detail-value">{{userInfo.major ||'未知' }}</span>
          </div>

          <div class="detail-item">
            <span class="detail-label">年级</span>
            <span class="detail-value">{{userInfo.grade || '未知'}}</span>
          </div>

          <div class="detail-item">
            <span class="detail-label">手机</span>
            <span class="detail-value">{{userInfo.phone}}</span>
          </div>

          <div class="detail-item">
            <span class="detail-label">邮箱</span>
            <span class="detail-value">{{userInfo.email}}</span>
          </div>

          <div class="detail-item">
            <span class="detail-label">QQ</span>
            <span class="detail-value">xxxxxxxx</span>
          </div>
        </div>
      </div>

      <!-- 卡片底部 - 技能标签 -->
      <div class="card-footer">
        <h2 class="section-title">
          <i class="fas fa-star"></i> 技能特长
        </h2>
        <div class="skills-tags">
          <el-tag type="success">Python</el-tag>
          <el-tag type="info">JavaScript</el-tag>
          <el-tag type="warning">Vue.js</el-tag>
          <el-tag type="danger">机器学习</el-tag>
          <el-tag type="primary">数据结构</el-tag>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import {ref, reactive, onMounted} from 'vue';
import {useUserStore} from "@/stores/user";
import {reqGetLoginUserInfo, reqGetUserById, reqModifyLoginUser} from "@/api/front/user";
import {useRoute} from "vue-router";

const userStore = useUserStore();
const route = useRoute();
// 头像悬停状态
const isHovered = ref(false);
let userId=route.params.userId
let userForm=reactive({
  avatar:'',
  userId:userId,
})
let userInfo=ref({})

let getUserInfo=async ()=>{
  let res=await reqGetUserById(userId)
  userInfo.value=res.data
}
let handleSuccess=(res)=>{
  userForm.avatar=res.data.visitPath
  reqModifyLoginUser(userForm).then(res=>{
    userStore.modifyUserInfo()
  })
}

onMounted(()=>{
  getUserInfo()
})
</script>

<style scoped>
.personal-info-container {
  min-height: 100vh;
  padding: 2rem;
  background-color: #f5f7fa;
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.info-card {
  width: 100%;
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.info-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.avatar-overlay i {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
}
.card-body {
  padding: 2rem;
}

.section-title {
  font-size: 1.2rem;
  color: #1d2129;
  margin: 0 0 1rem 0;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #f0f2f5;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.section-title i {
  color: #4e5969;
}

.profile-section {
  margin-bottom: 2rem;
}

.profile-content {
  color: #4e5969;
  line-height: 1.6;
  margin: 0;
  padding: 0.5rem 0;
}

.details-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.detail-item {
  display: flex;
  flex-direction: column;
}

.detail-label {
  color: #86909c;
  font-size: 0.9rem;
  margin-bottom: 0.3rem;
}

.detail-value {
  color: #1d2129;
  font-weight: 500;
}

.card-footer {
  padding: 1.5rem 2rem;
  background-color: #f7f8fa;
  border-top: 1px solid #f0f2f5;
}

.skills-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  padding: 0.5rem 0;
}

/* 响应式调整 */
@media (max-width: 768px) {
  .card-header {
    flex-direction: column;
    text-align: center;
    padding: 1.5rem;
  }

  .contact-buttons {
    justify-content: center;
  }

  .details-grid {
    grid-template-columns: 1fr;
  }

  .personal-info-container {
    padding: 1rem;
  }
}
</style>
